<template>
  <div class="core-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <div class="scroll-item" v-for="(item, index) in emojis1" :key="index" @click="clickHandler
(item)">
          <div class="shangxian">
            <div class="xuexname">
              <img v-if="item.schoolLogo" :src="item.schoolLogo">
              <div class="xuexiao">
                <span>{{item.canteenName}}</span>
                <span class="fuzhe">食堂负责人：{{item.managerName}}</span>
              </div>
            </div>
            <div class="jiankong">
              <div class="jk">
                <span>监控点位：{{item.monitorNum}}</span>
                <span class="renshu">今日人流：{{item.studentNum}}</span>
              </div>
              <img src="../assets/imgs/right.png">
            </div>
          </div>
        </div>
      </div>
    </div>
    <dialog-bar v-model="sendVal" type="danger" title="我是标题" content="我是内容" :dataid="dataid" dangerText="Delete"></dialog-bar>
  </div>
</template>
<script>
  import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
import dialogBar from './confirm.vue'
import axios from 'axios'
BScroll.use(Slide)
export default {
    data() {
        return {
            scrollY: 0,
            emojis1: [],
            // 播放间隔
            interval: 10,
            sendVal: false,
            startY:0,
            bs1:null,
            pageNum:1,
            dataid:''
        }
    },
    mounted() {
        this.canteenInfo();
        this.init()
    },
    props: {
        countycher:{
            type: String,
            default: null
        }
    },
    watch: {
        emojis1: function () {
          this.$nextTick(() => {
            this.bs1.refresh()
          })
        },
        countycher:function(){
          this.pageNum = 1;
          this.canteenInfo();
        }
      },
    beforeDestroy() {
        this.bs1.destroy()
    },
    components: {
        "dialogBar": dialogBar
    },
    methods: {
        canteenInfo(){
            axios.post('/api/web/pub/canteenInfo/page',{pageNum:this.pageNum,pageSize:10,country:this.countycher}).then(response => {
                let data = response.data.rows;
                this.total = response.data.total;
                this.emojis1 = [...this.emojis1,...data]
                this.init();
            }
            
            ).catch(error => 
            console.log(error)
        )
        },
        
        init() {
            this.bs1 = new BScroll(this.$refs.scroll, {
                probeType: 3,
                momentum: false,
                snap: {
                    loop: true,
                    threshold: 0.1,
                    speed: 100
                },
            })
            this.play();
            this.bs1.on('enable', () => {

            })
            this.bs1.on('scrollStart', () => {
                // console.log('scrollStart-')
                this.startY = this.bs1.y;
                // this.play()
            })
            this.bs1.on('scrollEnd', () => {
                let page = this.bs1.y;
                // console.log(page);
                // console.log(this.startY);

                // 当滚动结束以后 如果是自动播放的话 那么首先要清除定时器(防止手动拖动轮播图以后图片无法正确显示)然后再次执行方法 才能实现轮播
                if (this.startY > page||this.startY==0) {
                    this.startY = 0;
                    this.play()
                }
            })
            this.bs1.on('scroll', ({ y }) => {
                this.scrollY = y;
            })
            this.bs1.on('beforeScrollStart', ({ x,y }) => {
            })
        },
        clickHandler(item) {
            this.dataid = item.id;
            this.sendVal = true;
        },
        play: function() {
            let playPage = this.scrollY - 2;
            let tabH = this.$refs.scroll.offsetHeight;
            // console.log(tabH);
            let aa = this.emojis1.length * tabH;
            if (playPage < -aa) {
              if (this.emojis1.length >15) {
                this.emojis1.splice(0,8)
              }
              if (this.pageNum == this.total) {
                this.pageNum =1
              }else{
                this.pageNum++;
              }
                this.canteenInfo();
            }
            setTimeout(() => {
                this.bs1.scrollTo(0, playPage, 1)
            }, this.interval)
        }
    }
}
</script>
<style type="text/css" scoped>
.core-container {
  height: 290px;
  overflow: hidden;
}

.scroll-wrapper {
  height: 86px;
  position: relative;
}

.scroll-item {
  height: 86px;
  margin-left: 20px;
  padding: 6px 0;
}

.shangxian {
  display: flex;
  justify-content: space-between;
  height: 86px;
  align-items: center;
  padding: 0 16px;
  background: linear-gradient(90deg, rgba(0, 252, 255, 0.3) 0%, rgba(0, 252, 255, 0) 100%);
  border-radius: 8px 0px 0px 8px;
}

.liudong {
  height: 284px;
}

.quname {
  font-size: 24px;
  font-weight: 600;
  color: #FFF;
  line-height: 33px;
}

.quxian {
  font-size: 18px;
  font-weight: 500;
  color: #FFF;
  line-height: 25px;
}

.quxian i {
  font-style: normal;
  color: #0CFED9;
}

.xuexname img {
  float: left;
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.xuexname span {
  white-space: nowrap;
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 25px;
}

.jiankong img {
  float: right;
  width: 14px;
  height: 14px;
}

.xuexiao {
  float: left;
  margin-left: 16px;
}

.xuexiao span {
  width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: nowrap;
}

.xuexname .fuzhe {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
  margin-top: 5px;
}

.jk {
  float: left;
  margin-right: 16px;
}

.jiankong {
  display: flex;
  align-items: center;
}

.jiankong span {
  display: block;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
}

.jiankong .renshu {
  margin-top: 8px;
}

</style>
